<template>
  <div class="home-title">
    {{ data.title || data.subtitle }}
    <div class="more center-flex" @click="toWedding">
      <span>更多</span>
      <img class="more-icon" src="../images/ico_more@2x.png" alt="" />
    </div>
  </div>
  <div class="item-list" ref="hot">
    <div class="scroll-content">
      <router-link
        v-for="it in data.record || []"
        class="item"
        :key="it.id"
        :to="{ name: 'weddingDetail', params: { id: it.id } }"
      >
        <my-image :transition="true" :src="it.cover"></my-image>
        <div class="item-content">
          <div class="title ellipsis">{{ it.name }}</div>
          <div class="des ellipsis">{{ it.subtitle }}</div>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import betterScroll from "/src/use/use-better-scroll.js";
import { useRouter } from "vue-router";

export default {
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  setup() {
    const hot = ref(null);
    betterScroll(hot);
    const router = useRouter();
    const toWedding = () => {
      router.push({
        path: "/wedding",
      });
      window.scrollTo({ top: 0 });
    };
    return {
      toWedding,
      hot,
    };
  },
};
</script>

<style lang="less" scoped>
.item-list {
  width: 100%;
  height: 190px;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  .item {
    margin-right: 12px;
    display: inline-block;
    position: relative;
    width: 210px;
    &:last-child {
      margin-right: 0;
    }
    .item-content {
      padding-top: 10px;
    }
    .title {
      font-size: 16px;
      color: #ffffff;
      line-height: 22px;
      margin-bottom: 1px;
    }
    .des {
      font-size: 12px;
      color: #757575;
      line-height: 17px;
    }
  }
}
</style>